<template>
    <div class="family-accountdetails">
        <div class="balance">
            <div class="return" @click="return1"><i class="el-icon-arrow-left"> 返回</i></div>
            <div class="calendar">
                <el-date-picker v-model="value2" type="month" placeholder="请选择月份" @change="updateGlobalVariable">
                </el-date-picker>
            </div>
            <LwyEcharts v-cloak class="chatr" id="chart" :options="options"></LwyEcharts>
            <div class="progress">
                <p>支出类目排行</p>
                <hr>
                <div class="progress1">
                    <div class="progress-category" v-for="record in ranking">
                        <span class="title">{{ record.category }}</span>
                        <img src="../assets/image/lwy/food.jpg" alt="">
                        <el-progress color="red" :percentage="record.prices"></el-progress>
                        <span class="total-amount">本月共支出:<span>{{ record.price }}</span></span>
                        <span class="singular-number">支出<span>{{ record.count }}</span>笔</span>
                    </div>
                </div>
            </div>
            <div class="expenditure">
                <button @click="sel = i" :class="['expenditure-sum', sel == i ? 'active' : '']"
                    v-for="(v, i) in expenditureDate">{{
                        v.btn }}</button>
                <!-- <div v-for="(v, i) in expenditureDate" :style="{ display: sel == i ? 'block' : 'none' }">{{ v.pie }}</div> -->
                <div ref="chart1" class="chart1" :style="{ display: sel == 0 ? 'block' : 'none' }"></div>
                <div ref="chart2" class="chart1" :style="{ display: sel == 1 ? 'block' : 'none' }"></div>
                <div ref="chart3" class="chart1" :style="{ display: sel == 2 ? 'block' : 'none' }"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import LwyEcharts from "./LwyEcharts.vue"
export default {
    components: {
        LwyEcharts
    },
    data() {
        return {
            value2: new Date(),
            showcalendar: false,
            sel: 0,
            expenditureDate: [
                { btn: '年支出', content: 'chart0' },
                { btn: '季度支出', content: 'chart1' },
                { btn: '月支出', content: 'chart2' }
            ],
            expenditure: [],
            ranking: [],
            options: {
                title: [{
                    text: '支出趋势概况',
                    textStyle: {
                        fontSize: 18
                    }
                }, {
                    text: '本月每天平均支出：',
                    left: '55%',
                    textStyle: {
                        color: ' rgba(00,00,00,0.5)',
                        fontSize: 14,
                    },

                }
                ], xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    },
                    {
                        showSymbol: false,
                        data: [],
                        xAxisIndex: 1,
                        yAxisIndex: 1
                    }
                ],
                visualMap: [
                    {
                        show: false,
                        type: 'continuous',
                        seriesIndex: 0,
                        min: 100,
                        max: 300
                    }
                ],
                tooltip: {
                    trigger: 'axis'
                }
            },

        }
    },
    // 封装的echarts渲染的折线图
    created() {
        this.expenditure.push(this.$route.query.data)
        let oDate = new Date()
        let year = oDate.getFullYear()
        let month = oDate.getMonth() + 1
        let date1 = '01' * 30
        let time = year + '0' + month + '01'
        let time2 = year + '0' + month + '' + date1
        let age = 0
        for (let i = 0; i < this.expenditure[0].length; i++) {
            let time3 = this.expenditure[0][i].time.split(' ')
            time3[0] = time3[0].split('-')
            let time1 = ''
            for (let i = 0; i < time3[0].length; i++) {
                time1 += time3[0][i]
            }
            this.expenditure[0][i].time = time1
            if (this.expenditure[0][i].time >= time && this.expenditure[0][i].time <= time2) {
                let year = this.expenditure[0][i].time.slice(0, 4)
                let month = this.expenditure[0][i].time.slice(4, 6)
                let data = this.expenditure[0][i].time.slice(6, 8)
                this.expenditure[0][i].time = year + '-' + month + '-' + data
                age += parseFloat(Math.ceil(this.expenditure[0][i].price / 30))
                this.options.xAxis.data.push(this.expenditure[0][i].time)
                this.options.series[1].data.push(this.expenditure[0][i].price)
                this.options.series[0].data.push(this.expenditure[0][i].price)
            }
        }
        this.options.title[1].text = '本月每天平均支出:' + age
    },
    mounted() {
        const prices = sessionStorage.getItem('amountl1')
        const ExpenseRanking = {}
        const categoryStats = {};
        let oDate = new Date()
        let year = oDate.getFullYear()
        let month = oDate.getMonth() + 1
        let date1 = '01' * 30
        let time = year + '0' + month + '01'
        let time2 = year + '0' + month + '' + date1
        for (let i = 0; i < this.expenditure[0].length; i++) {
            let time3 = this.expenditure[0][i].time.split(' ')
            time3[0] = time3[0].split('-')
            let time1 = ''
            for (let i = 0; i < time3[0].length; i++) {
                time1 += time3[0][i]
            }
            this.expenditure[0][i].time = time1
            if (this.expenditure[0][i].time >= time && this.expenditure[0][i].time <= time2) {
                if (!ExpenseRanking[this.expenditure[0][i].category]) {
                    ExpenseRanking[this.expenditure[0][i].category] = {
                        count: 0,
                        price: 0

                    }
                }
                ExpenseRanking[this.expenditure[0][i].category].price += parseFloat(this.expenditure[0][i].price)
                ExpenseRanking[this.expenditure[0][i].category].count++
            }

        }
        for (const category in ExpenseRanking) {
            categoryStats[category] = {
                count: ExpenseRanking[category].count,
                price: ExpenseRanking[category].price
            };
        }
        const statsArray = Object.keys(categoryStats).map(category => ({
            category,
            count: categoryStats[category].count,
            price: categoryStats[category].price,
            prices: Math.ceil((categoryStats[category].price / prices) * 100)
        }));
        this.ranking = statsArray
        this.ranking.sort((a, b) => b.price - a.price)
        this.renderChart()
        this.renderChart1()
        this.renderChart2()
    },
    methods: {
        updateGlobalVariable() {
            this.$root.globalVariable = this.value2;
            let year = this.value2.getFullYear()
            let month;
            let month1// = this.value2.getMonth() + 3
            if ((this.value2.getMonth() + 1) < 10) {
                month = '0' + (this.value2.getMonth() + 1)
            } else if ((this.value2.getMonth() + 1) >= 10) {
                month = this.value2.getMonth() + 1
            }
            if ((this.value2.getMonth() + 1) == "01" || (this.value2.getMonth() + 1) == '04' || (this.value2.getMonth() + 1) == '07' || (this.value2.getMonth() + 1) == '10') {
                if (((this.value2.getMonth() + 1) + 2) < 10) {
                    month1 = '0' + ((this.value2.getMonth() + 1) + 2)
                } else if (((this.value2.getMonth() + 1) + 2) >= 10) {
                    month1 = (this.value2.getMonth() + 1) + 2
                }
            } else if ((this.value2.getMonth() + 1) == '02' || (this.value2.getMonth() + 1) == '05' || (this.value2.getMonth() + 1) == '08' || (this.value2.getMonth() + 1) == '11') {
                if (((this.value2.getMonth() + 1) + 1) < 10) {
                    month1 = '0' + ((this.value2.getMonth() + 1) + 1)
                } else if (((this.value2.getMonth() + 1) + 1) >= 10) {
                    month1 = (this.value2.getMonth() + 1) + 1
                }
            } else if ((this.value2.getMonth() + 1) == '03' || (this.value2.getMonth() + 1) == '06' || (this.value2.getMonth() + 1) == '09' || (this.value2.getMonth() + 1) == '12') {
                if (((this.value2.getMonth() + 1) - 2) < '10') {
                    month1 = '0' + ((this.value2.getMonth() + 1) - 2)
                } else if (((this.value2.getMonth() + 1) - 2) >= 10) {
                    month1 = (this.value2.getMonth() + 1) - 2
                }
            }
            let date = this.value2.getDate()
            let date1 = date * 30
            let time = year + '' + month + '0' + date
            let time2 = year + '' + month + '' + date1
            let time4 = year + '' + month1 + '' + date1
            // 进度条
            let prices = 0
            const ExpenseRanking = {}
            const categoryStats = {};
            for (let i = 0; i < this.expenditure[0].length; i++) {
                let time3 = this.expenditure[0][i].time.split(' ')
                time3[0] = time3[0].split('-')
                let time1 = ''
                for (let i = 0; i < time3[0].length; i++) {
                    time1 += time3[0][i]
                }
                this.expenditure[0][i].time = time1
                if (this.expenditure[0][i].time >= time && this.expenditure[0][i].time <= time2) {
                    if (!ExpenseRanking[this.expenditure[0][i].category]) {
                        ExpenseRanking[this.expenditure[0][i].category] = {
                            count: 0,
                            price: 0
                        }
                    }
                    ExpenseRanking[this.expenditure[0][i].category].price += parseFloat(this.expenditure[0][i].price)
                    ExpenseRanking[this.expenditure[0][i].category].count++
                    prices += parseFloat(this.expenditure[0][i].price)
                }

            }
            for (const category in ExpenseRanking) {
                categoryStats[category] = {
                    count: ExpenseRanking[category].count,
                    price: ExpenseRanking[category].price
                };
            }
            const statsArray = Object.keys(categoryStats).map(category => ({
                category,
                count: categoryStats[category].count,
                price: categoryStats[category].price,
                prices: Math.ceil((categoryStats[category].price / prices) * 100)

            }));
            this.ranking = statsArray
            this.ranking.sort((a, b) => b.price - a.price)
            // 折线图-月
            this.options = {
                title: [{
                    text: '支出趋势概况',
                    textStyle: {
                        fontSize: 18
                    }
                },
                {
                    text: '本月每天平均支出：',
                    left: '55%',
                    textStyle: {
                        color: ' rgba(00,00,00,0.5)',
                        fontSize: 14,
                    },

                }
                ],
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    },
                    {
                        showSymbol: false,
                        data: [],
                        xAxisIndex: 1,
                        yAxisIndex: 1
                    }
                ],
                visualMap: [
                    {
                        show: false,
                        type: 'continuous',
                        seriesIndex: 0,
                        min: 100,
                        max: 300
                    }
                ],
                tooltip: {
                    trigger: 'axis'
                }
            }
            let age = 0
            for (let i = 0; i < this.expenditure[0].length; i++) {
                let time3 = this.expenditure[0][i].time.split(' ')
                time3[0] = time3[0].split('-')
                let time1 = ''
                for (let i = 0; i < time3[0].length; i++) {
                    time1 += time3[0][i]
                }
                this.expenditure[0][i].time = time1
                if (this.expenditure[0][i].time >= time && this.expenditure[0][i].time <= time2) {
                    let year = this.expenditure[0][i].time.slice(0, 4)
                    let month = this.expenditure[0][i].time.slice(4, 6)
                    let data = this.expenditure[0][i].time.slice(6, 8)
                    this.expenditure[0][i].time = year + '-' + month + '-' + data
                    age += parseFloat(Math.ceil(this.expenditure[0][i].price / 30))
                    this.options.xAxis.data.push(this.expenditure[0][i].time)
                    this.options.series[1].data.push(this.expenditure[0][i].price)
                    this.options.series[0].data.push(this.expenditure[0][i].price)
                }

            }
            this.options.title[1].text = '本月每天平均支出:' + age
            // 饼状图-月
            const chartDom = this.$refs.chart3;
            const myChart = echarts.init(chartDom);
            const option2 = {
                title: {
                    text: '本月账单明细',
                    left: '15%',
                    top: '6%',
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            const nameValueMap2 = {}
            for (let i = 0; i < this.expenditure[0].length; i++) {
                let time3 = this.expenditure[0][i].time.split(' ')
                time3[0] = time3[0].split('-')
                let time1 = ''
                for (let i = 0; i < time3[0].length; i++) {
                    time1 += time3[0][i]
                }
                this.expenditure[0][i].time = time1
                if (this.expenditure[0][i].time >= time && this.expenditure[0][i].time <= time2) {
                    let year = this.expenditure[0][i].time.slice(0, 4)
                    let month = this.expenditure[0][i].time.slice(4, 6)
                    let data = this.expenditure[0][i].time.slice(6, 8)
                    this.expenditure[0][i].time = year + '-' + month + '-' + data
                    const category2 = this.expenditure[0][i].category
                    const price2 = this.expenditure[0][i].price
                    if (nameValueMap2[category2]) {
                        nameValueMap2[category2] += parseFloat(price2)
                    } else {
                        nameValueMap2[category2] = parseFloat(price2)
                    }
                }
            }
            for (const [name, value] of Object.entries(nameValueMap2)) {
                option2.series[0].data.push({ name: name, value: value })
            }
            myChart.setOption(option2);
            //  饼状图-季度
            const chartDom1 = this.$refs.chart2;
            const myChart1 = echarts.init(chartDom1);
            const option1 = {
                title: {
                    text: '当前季度账单明细',
                    left: '15%',
                    top: '6%',
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            const nameValueMap1 = {}
            for (let i = 0; i < this.expenditure[0].length; i++) {
                let time3 = this.expenditure[0][i].time.split(' ')
                time3[0] = time3[0].split('-')
                let time1 = ''
                for (let i = 0; i < time3[0].length; i++) {
                    time1 += time3[0][i]
                }
                this.expenditure[0][i].time = time1
                if (this.expenditure[0][i].time >= time && this.expenditure[0][i].time <= time4 || this.expenditure[0][i].time <= time && this.expenditure[0][i].time >= time4) {
                    let year = this.expenditure[0][i].time.slice(0, 4)
                    let month = this.expenditure[0][i].time.slice(4, 6)
                    let data = this.expenditure[0][i].time.slice(6, 8)
                    this.expenditure[0][i].time = year + '-' + month + '-' + data
                    const category1 = this.expenditure[0][i].category
                    const price1 = this.expenditure[0][i].price
                    if (nameValueMap1[category1]) {
                        nameValueMap1[category1] += parseFloat(price1)
                    } else {
                        nameValueMap1[category1] = parseFloat(price1)
                    }
                }
            }
            for (const [name, value] of Object.entries(nameValueMap1)) {
                option1.series[0].data.push({ name: name, value: value })
            }
            myChart1.setOption(option1);
            // 饼状图-年
            const chartDom2 = this.$refs.chart1;
            const myChart2 = echarts.init(chartDom2);
            const option = {
                title: {
                    text: '本年账单明细',
                    left: '15%',
                    top: '6%',
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            const nameValueMap = {}; // 哈希表（字典）存储名称和累加值
            for (let i = 0; i < this.expenditure[0].length; i++) {
                let time3 = this.expenditure[0][i].time.split(' ')
                time3[0] = time3[0].split('-')
                let time1 = ''
                for (let i = 0; i < time3[0].length; i++) {
                    time1 += time3[0][i]
                }
                this.expenditure[0][i].time = time1
                if (this.expenditure[0][i].time.slice(0, 4) == year) {
                    const category = this.expenditure[0][i].category;
                    const price = this.expenditure[0][i].price;
                    if (nameValueMap[category]) {
                        // 当前名称已存在于哈希表中，将当前值累加到对应的累加值上
                        nameValueMap[category] += parseInt(price);;
                    } else {
                        // 当前名称不存在于哈希表中，创建新的项并设置初始累加值为当前值
                        nameValueMap[category] = parseInt(price);;
                    }
                }

            }
            // 将累加值添加到 option.series[0].data 数组中
            for (const [name, value] of Object.entries(nameValueMap)) {
                option.series[0].data.push({ name: name, value: value });
            }

            myChart2.setOption(option);
        },
        Calendar() {
            this.showcalendar = !this.showcalendar
        },
        renderChart() {
            const chartDom = this.$refs.chart1;
            const myChart = echarts.init(chartDom);
            const option = {
                title: {
                    text: '本年账单明细',
                    left: '15%',
                    top: '6%',
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            let oDate = new Date()
            let year = oDate.getFullYear()
            const nameValueMap = {}; // 哈希表（字典）存储名称和累加值
            for (let i = 0; i < this.expenditure[0].length; i++) {
                let time3 = this.expenditure[0][i].time.split(' ')
                time3[0] = time3[0].split('-')
                let time1 = ''
                for (let i = 0; i < time3[0].length; i++) {
                    time1 += time3[0][i]
                }
                this.expenditure[0][i].time = time1
                if (this.expenditure[0][i].time.slice(0, 4) == year) {
                    const category = this.expenditure[0][i].category;
                    const price = this.expenditure[0][i].price;
                    if (nameValueMap[category]) {
                        // 当前名称已存在于哈希表中，将当前值累加到对应的累加值上
                        nameValueMap[category] += parseInt(price);;
                    } else {
                        // 当前名称不存在于哈希表中，创建新的项并设置初始累加值为当前值
                        nameValueMap[category] = parseInt(price);;
                    }
                }

            }
            // 将累加值添加到 option.series[0].data 数组中
            for (const [name, value] of Object.entries(nameValueMap)) {
                option.series[0].data.push({ name: name, value: value });
            }

            myChart.setOption(option);
        },
        renderChart1() {
            const chartDom = this.$refs.chart2;
            const myChart = echarts.init(chartDom);
            const option1 = {
                title: {
                    text: '当前季度账单明细',
                    left: '15%',
                    top: '6%',
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            const nameValueMap1 = {}
            let oDate = new Date()
            let year = oDate.getFullYear()
            let month //= oDate.getMonth() + 1
            let month1
            if ((oDate.getMonth() + 1) < 10) {
                month = '0' + (oDate.getMonth() + 1)
            } else if ((oDate.getMonth() + 1) >= 10) {
                month = oDate.getMonth() + 1
            }

            if ((oDate.getMonth() + 1) == "01" || (oDate.getMonth() + 1) == '04' || (oDate.getMonth() + 1) == '07' || (oDate.getMonth() + 1) == '10') {
                if (((oDate.getMonth() + 1) + 2) < 10) {
                    month1 = '0' + ((oDate.getMonth() + 1) + 2)
                } else if (((oDate.getMonth() + 1) + 2) >= 10) {
                    month1 = (oDate.getMonth() + 1) + 2
                }
            } else if ((oDate.getMonth() + 1) == '02' || (oDate.getMonth() + 1) == '05' || (oDate.getMonth() + 1) == '08' || (oDate.getMonth() + 1) == '11') {
                if (((oDate.getMonth() + 1) + 1) < 10) {
                    month1 = '0' + ((oDate.getMonth() + 1) + 1)
                } else if (((oDate.getMonth() + 1) + 1) >= 10) {
                    month1 = (oDate.getMonth() + 1) + 1
                }
            } else if ((oDate.getMonth() + 1) == '03' || (oDate.getMonth() + 1) == '06' || (oDate.getMonth() + 1) == '09' || (oDate.getMonth() + 1) == '12') {
                if (((oDate.getMonth() + 1) - 2) < 10) {
                    month1 = '0' + ((oDate.getMonth() + 1) - 2)
                } else if (((oDate.getMonth() + 1) - 2) >= 10) {
                    month1 = (oDate.getMonth() + 1) - 2
                }
            }
            let date1 = '01' * 30
            let time = year + '' + month + '01'
            let time2 = year + '' + month1 + '' + date1
            for (let i = 0; i < this.expenditure[0].length; i++) {
                let time3 = this.expenditure[0][i].time.split(' ')
                time3[0] = time3[0].split('-')
                let time1 = ''
                for (let i = 0; i < time3[0].length; i++) {
                    time1 += time3[0][i]
                }
                this.expenditure[0][i].time = time1
                if (this.expenditure[0][i].time >= time && this.expenditure[0][i].time <= time2 || this.expenditure[0][i].time <= time && this.expenditure[0][i].time >= time2) {
                    let year = this.expenditure[0][i].time.slice(0, 4)
                    let month = this.expenditure[0][i].time.slice(4, 6)
                    let data = this.expenditure[0][i].time.slice(6, 8)
                    this.expenditure[0][i].time = year + '-' + month + '-' + data
                    const category1 = this.expenditure[0][i].category
                    const price1 = this.expenditure[0][i].price
                    if (nameValueMap1[category1]) {
                        nameValueMap1[category1] += parseFloat(price1)
                    } else {
                        nameValueMap1[category1] = parseFloat(price1)
                    }
                }
            }
            for (const [name, value] of Object.entries(nameValueMap1)) {
                option1.series[0].data.push({ name: name, value: value })
            }
            myChart.setOption(option1);
        },
        renderChart2() {
            const chartDom = this.$refs.chart3;
            const myChart = echarts.init(chartDom);
            const option2 = {
                title: {
                    text: '本月账单明细',
                    left: '15%',
                    top: '6%',
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            let oDate = new Date()
            let year = oDate.getFullYear()
            let month = oDate.getMonth() + 1
            let date1 = '01' * 30
            let time = year + '0' + month + '01'
            let time2 = year + '0' + month + '' + date1
            const nameValueMap2 = {}
            for (let i = 0; i < this.expenditure[0].length; i++) {
                let time3 = this.expenditure[0][i].time.split(' ')
                time3[0] = time3[0].split('-')
                let time1 = ''
                for (let i = 0; i < time3[0].length; i++) {
                    time1 += time3[0][i]
                }
                this.expenditure[0][i].time = time1
                if (this.expenditure[0][i].time >= time && this.expenditure[0][i].time <= time2) {
                    let year = this.expenditure[0][i].time.slice(0, 4)
                    let month = this.expenditure[0][i].time.slice(4, 6)
                    let data = this.expenditure[0][i].time.slice(6, 8)
                    this.expenditure[0][i].time = year + '-' + month + '-' + data
                    const category2 = this.expenditure[0][i].category
                    const price2 = this.expenditure[0][i].price
                    if (nameValueMap2[category2]) {
                        nameValueMap2[category2] += parseFloat(price2)
                    } else {
                        nameValueMap2[category2] = parseFloat(price2)
                    }
                }
            }
            for (const [name, value] of Object.entries(nameValueMap2)) {
                option2.series[0].data.push({ name: name, value: value })
            }
            myChart.setOption(option2);
        },
        return1() {
            this.$router.push('/happyhome/live/family')
        }
    }

}
</script>
<style lang="less">
.family-accountdetails {
    [v-cloak] {
        display: none;
    }

    .balance {
        width: 1209.33px;
        margin: auto;

        .return {
            text-align: left;
            margin-top: 20px;
            margin-left: 20px;

            i {
                margin-right: 5px;
            }
        }

        .calendar {
            text-align: left;
            float: right;
            margin-right: 20px;
            margin-top: -10px;

            .el-input__inner {
                border: 1px solid #000;
            }
        }

        .chatr {
            margin-top: 20px;
            width: 600px;
            height: 400px;
            margin-left: 20px;
        }

        .progress {
            width: 500px;
            height: 300px;
            float: right;
            margin-right: 90px;
            margin-top: -380px;

            .progress1 {
                overflow-y: scroll;
                height: 250px;

                .progress-category {
                    .title {
                        display: inline-block;
                        width: 400px;
                        text-align: left;
                        margin-left: 50px;
                    }

                    img {
                        width: 30px;
                        height: 30px;
                        float: left;
                        margin-left: 25px;
                        margin-top: -10px;
                        border-radius: 50%;
                    }

                    .el-progress {
                        width: 400px;
                        margin-left: 50px;

                        .el-progress-bar {
                            width: 350px;
                        }
                    }

                    .total-amount {
                        margin-left: -30px;
                        font-size: 14px;

                        span {
                            color: red;
                        }
                    }

                    .singular-number {
                        margin-left: 180px;
                        font-size: 14px;

                        span {
                            color: red;
                        }
                    }
                }
            }

            p {
                font-weight: bolder;
                font-size: 18px;
            }

            hr {
                width: 450px;
            }



        }

        .expenditure {

            .expenditure-sum {
                width: 90px;
                height: 35px;
                border: 1px solid rgba(00, 00, 00, 0.4);
                border-radius: 0.5em;
                margin-left: 180px;
                line-height: 35px;
                background-color: #fff;
                color: rgba(00, 00, 00, 0.7);

                &:first-child {
                    margin-left: -5px;
                }
            }

            .active {
                background-color: rgb(255, 233, 192);
            }

            .chart1 {
                box-sizing: border-box;
                padding-left: 40px;
                width: 560px;
                height: 260px;
                margin-left: 320px;
            }
        }

    }
}
</style>